<!--
 @description：校验界面
 @author: Xg
 @date: 2021/6/29 14:31
-->
<template>
  <div>
    <!-- 校验页面 -->
    <el-dialog
      :title="title"
      :visible.sync="orderLoginVisible"
      modal-append-to-body
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="closeDialog"
    >
      <!--      <el-form ref="form" label-width="150px" :rules="rules">-->
      <!--        <el-form-item label="点餐任务码">-->
      <!--          <el-input ref="input" v-model="taskId" placeholder="请将管理员发的任务码粘贴到此处（如果闪退重进即可）" @keydown.enter.native="valid" />-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <el-table
        :data="taskList"
        border
        style="overflow:auto;width: 100%"
      >
        <el-table-column
          align="center"
          prop="taskTitle"
          sortable
          label="标题"
          width="300"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="openOrderInfoDialog(scope.row.taskId)">{{ scope.row.taskTitle }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="storeName"
          label="商家"
          width="250"
        />
        <!-- 该字段是在获取数据时，新增的一个范围字段，数据库中不存在 -->
        <el-table-column
          align="center"
          prop="range"
          label="时间"
          sortable
          width="200"
        />
        <el-table-column
          align="center"
          prop="nickName"
          label="发起人"
          width="200"
        />
        <el-table-column
          align="center"
          prop="totalPerson"
          label="参与人数"
          width="150"
        >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
              <el-link type="primary" @click="openOrderInfoDialog(scope.row.taskId)">{{ scope.row.totalPerson }}</el-link>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-link v-if="scope.row.status === 0" icon="el-icon-dish-1" type="primary" @click="openOrderMain(scope.row.taskId)">参与点餐</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 详情页面 -->
    <orderInfoDialog
      v-if="orderDialogVisible"
      :order-dialog-visible="orderDialogVisible"
      :task-id="taskId"
      @close="closeOrderInfoDialog"
    />

    <!-- 点餐界面 -->
    <orderMain
      v-if="orderMainVisible"
      :order-main-visible="orderMainVisible"
      :task-id="taskId"
      @close="closeOrderMain"
    />
  </div>
</template>

<script>
import OrderMain from '@/views/meal/history/orderMain'
import orderInfoDialog from '@/views/meal/order/orderInfoDialog'
import { getAllOngoingTask } from '@/api/meal/task'
export default {
  name: 'OrderLogin',
  components: { OrderMain, orderInfoDialog },
  props: {
    orderLoginVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '参与点餐',
      taskId: null,
      orderMainVisible: false,
      orderDialogVisible: false,
      taskList: []
    }
  },
  created() {
    this.getAllOngoingTask()
    // this.inputFocus()
  },
  methods: {
    // 打开点餐详情界面
    openOrderInfoDialog(taskId) {
      this.taskId = taskId
      this.orderDialogVisible = true
    },
    // 关闭点餐详情界面
    closeOrderInfoDialog() {
      this.taskId = null
      this.orderDialogVisible = false
    },
    // 获取正在进行中的所有任务
    getAllOngoingTask() {
      getAllOngoingTask().then(res => {
        if (res.code === 200) {
          this.taskList = res.data
          this.taskList.forEach(function(list) {
            list.range = list.createTime.substring(11, 16) + ' ~ ' + list.endTime.substring(11, 16)
          })
        }
      })
    },
    // 自动聚焦
    // inputFocus() {
    //   this.$nextTick((x) => {
    //     this.$refs.input.focus()
    //   })
    // },
    // 关闭校验页面
    closeDialog(isRefresh) {
      this.taskId = null
      this.$emit('close', isRefresh)
    },
    // 校验点餐码是否有效
    // valid() {
    //   valid({ taskId: this.taskId }).then(res => {
    //     if (res.code === 200) {
    //       // 如果成功，则允许打开点餐页面，并且把任务码传进去，后端传回来这个taskId
    //       this.$message.success('欢迎进入点餐页面!')
    //       this.openOrderMain(res.data)
    //     }
    //   })
    // },
    // 选择进行中的点餐,打开点餐界面
    openOrderMain(taskId) {
      this.taskId = taskId
      this.orderMainVisible = true
    },
    // 关闭点餐页面
    closeOrderMain(isRefresh) {
      this.orderMainVisible = false
      // 顺带关闭校验界面
      this.closeDialog(isRefresh)
    }
  }

}
</script>

<style scoped>
.el-link {
  font-size: 12px;
}
</style>
